<template>
  <div class="voiceprint-management">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>声纹管理</h1>
      <p>注册和管理您的声纹库</p>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-container">
      <!-- 左侧声纹注册 -->
      <div class="left-panel">
        <div class="register-section">
          <h2>声纹注册</h2>
          
          <!-- 注册表单 -->
          <form @submit.prevent="submitRegistration" class="register-form">
            <div class="form-group">
              <label for="voiceName">姓名</label>
              <input 
                type="text" 
                id="voiceName" 
                v-model="registerForm.name" 
                placeholder="请输入姓名"
                required
              >
            </div>

            <div class="form-group">
              <label for="relationship">关系</label>
              <select id="relationship" v-model="registerForm.relationship" required>
                <option value="">请选择关系</option>
                <option value="本人">本人</option>
                <option value="家人">家人</option>
                <option value="朋友">朋友</option>
                <option value="同事">同事</option>
                <option value="其他">其他</option>
              </select>
            </div>

            <div class="form-group">
              <label for="description">描述</label>
              <textarea 
                id="description" 
                v-model="registerForm.description" 
                placeholder="请输入描述信息（可选）"
                rows="3"
              ></textarea>
            </div>

            <!-- 录音区域 -->
            <div class="recording-section">
              <h3>声纹录制</h3>
              <div class="recording-guide">
                <div class="guide-item">
                  <i class="fas fa-microphone"></i>
                  <span>请在安静环境中录制</span>
                </div>
                <div class="guide-item">
                  <i class="fas fa-clock"></i>
                  <span>录制时长建议30-60秒</span>
                </div>
                <div class="guide-item">
                  <i class="fas fa-volume-up"></i>
                  <span>语音清晰，语速适中</span>
                </div>
              </div>

              <div class="recording-area">
                <div class="visual-area">
                  <div class="microphone-container">
                    <div class="microphone-icon" :class="{active: isRecording}">
                      <i class="fas fa-microphone"></i>
                    </div>
                    <div class="wave-animation" v-if="isRecording">
                      <div class="wave" v-for="i in 3" :key="i"></div>
                    </div>
                  </div>
                  
                  <!-- 录音波形显示 -->
                  <canvas 
                    ref="waveformCanvas" 
                    class="waveform-canvas"
                    width="400" 
                    height="80"
                    v-if="audioData.length > 0"
                  ></canvas>
                </div>

                <div class="recording-info">
                  <div class="time-display">
                    <span class="current-time">{{ formatTime(recordingTime) }}</span>
                    <span class="separator">/</span>
                    <span class="max-time">{{ formatTime(maxRecordingTime) }}</span>
                  </div>
                  <div class="quality-indicator" v-if="audioQuality > 0">
                    <span class="quality-label">音质评分：</span>
                    <div class="quality-bar">
                      <div 
                        class="quality-fill" 
                        :style="{width: audioQuality + '%'}"
                        :class="getQualityClass(audioQuality)"
                      ></div>
                    </div>
                    <span class="quality-score">{{ audioQuality }}/100</span>
                  </div>
                </div>

                <div class="recording-controls">
                  <button 
                    type="button" 
                    class="btn btn-record" 
                    @click="toggleRecording"
                    :disabled="isProcessing"
                  >
                    <i class="fas" :class="isRecording ? 'fa-stop' : 'fa-microphone'"></i>
                    {{ isRecording ? '停止录制' : '开始录制' }}
                  </button>
                  <button 
                    type="button" 
                    class="btn btn-play" 
                    @click="playRecording"
                    :disabled="!hasRecording || isRecording"
                  >
                    <i class="fas fa-play"></i>
                    播放
                  </button>
                  <button 
                    type="button" 
                    class="btn btn-clear" 
                    @click="clearRecording"
                    :disabled="!hasRecording || isRecording"
                  >
                    <i class="fas fa-trash"></i>
                    清除
                  </button>
                </div>
              </div>
            </div>

            <!-- 提交按钮 -->
            <div class="submit-section">
              <button 
                type="submit" 
                class="btn btn-primary btn-submit"
                :disabled="!canSubmit"
              >
                <i class="fas fa-save"></i>
                注册声纹
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- 右侧声纹库 -->
      <div class="right-panel">
        <div class="library-section">
          <div class="section-header">
            <h2>声纹库</h2>
            <div class="header-actions">
              <div class="search-box">
                <input 
                  type="text" 
                  placeholder="搜索声纹..." 
                  v-model="searchQuery"
                  class="search-input"
                >
                <i class="fas fa-search search-icon"></i>
              </div>
              <div class="sort-options">
                <select v-model="sortBy" class="sort-select">
                  <option value="name">按姓名</option>
                  <option value="date">按日期</option>
                  <option value="quality">按质量</option>
                </select>
              </div>
            </div>
          </div>

          <div class="voiceprint-list">
            <div 
              v-for="voiceprint in filteredVoiceprints" 
              :key="voiceprint.id"
              class="voiceprint-item"
              :class="{editing: editingId === voiceprint.id}"
            >
              <div class="item-header">
                <div class="user-info">
                  <div class="avatar">
                    <img :src="voiceprint.avatar" :alt="voiceprint.name">
                  </div>
                  <div class="info">
                    <h4>{{ voiceprint.name }}</h4>
                    <p class="relationship">{{ voiceprint.relationship }}</p>
                    <p class="date">{{ formatDate(voiceprint.createdAt) }}</p>
                  </div>
                </div>
                <div class="item-actions">
                  <button 
                    class="btn-icon" 
                    @click="playVoiceprint(voiceprint)"
                    :disabled="isPlaying === voiceprint.id"
                  >
                    <i class="fas" :class="isPlaying === voiceprint.id ? 'fa-pause' : 'fa-play'"></i>
                  </button>
                  <button class="btn-icon" @click="editVoiceprint(voiceprint)">
                    <i class="fas fa-edit"></i>
                  </button>
                  <button class="btn-icon" @click="deleteVoiceprint(voiceprint.id)">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>

              <div class="item-content">
                <div class="audio-info">
                  <div class="info-row">
                    <span class="label">时长：</span>
                    <span class="value">{{ voiceprint.duration }}s</span>
                  </div>
                  <div class="info-row">
                    <span class="label">质量：</span>
                    <div class="quality-display">
                      <div class="quality-bar-small">
                        <div 
                          class="quality-fill-small" 
                          :style="{width: voiceprint.quality + '%'}"
                          :class="getQualityClass(voiceprint.quality)"
                        ></div>
                      </div>
                      <span class="quality-text">{{ voiceprint.quality }}/100</span>
                    </div>
                  </div>
                  <div class="info-row">
                    <span class="label">文件大小：</span>
                    <span class="value">{{ formatFileSize(voiceprint.fileSize) }}</span>
                  </div>
                </div>

                <div class="description" v-if="voiceprint.description">
                  <p>{{ voiceprint.description }}</p>
                </div>
              </div>

              <!-- 编辑表单 -->
              <div class="edit-form" v-if="editingId === voiceprint.id">
                <div class="form-group">
                  <label>姓名</label>
                  <input type="text" v-model="editForm.name">
                </div>
                <div class="form-group">
                  <label>关系</label>
                  <select v-model="editForm.relationship">
                    <option value="本人">本人</option>
                    <option value="家人">家人</option>
                    <option value="朋友">朋友</option>
                    <option value="同事">同事</option>
                    <option value="其他">其他</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>描述</label>
                  <textarea v-model="editForm.description" rows="2"></textarea>
                </div>
                <div class="form-actions">
                  <button class="btn btn-primary btn-sm" @click="saveEdit">保存</button>
                  <button class="btn btn-secondary btn-sm" @click="cancelEdit">取消</button>
                </div>
              </div>
            </div>
          </div>

          <div class="empty-state" v-if="filteredVoiceprints.length === 0">
            <div class="empty-icon">
              <i class="fas fa-microphone-slash"></i>
            </div>
            <h3>暂无声纹数据</h3>
            <p>请先注册声纹或调整搜索条件</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const registerForm = ref({
  name: '',
  relationship: '',
  description: ''
})

// 录音相关状态
const isRecording = ref(false)
const isProcessing = ref(false)
const hasRecording = ref(false)
const recordingTime = ref(0)
const maxRecordingTime = ref(60)
const audioData = ref([])
const audioQuality = ref(0)
const isPlaying = ref(null)

// 编辑相关状态
const editingId = ref(null)
const editForm = ref({
  name: '',
  relationship: '',
  description: ''
})

// 搜索和排序
const searchQuery = ref('')
const sortBy = ref('name')

// 波形画布引用
const waveformCanvas = ref(null)

// 声纹库数据
const voiceprintList = ref([
  {
    id: 1,
    name: '张三',
    relationship: '本人',
    description: '我的声纹模板',
    avatar: '/api/placeholder/40/40',
    duration: 45,
    quality: 95,
    fileSize: 1024000,
    createdAt: '2024-01-15T10:30:00Z'
  },
  {
    id: 2,
    name: '李四',
    relationship: '家人',
    description: '家人的声纹',
    avatar: '/api/placeholder/40/40',
    duration: 38,
    quality: 92,
    fileSize: 896000,
    createdAt: '2024-01-10T14:22:00Z'
  },
  {
    id: 3,
    name: '王五',
    relationship: '朋友',
    description: '朋友的声纹模板',
    avatar: '/api/placeholder/40/40',
    duration: 52,
    quality: 88,
    fileSize: 1152000,
    createdAt: '2024-01-08T09:15:00Z'
  }
])

// 计算属性
const canSubmit = computed(() => {
  return registerForm.value.name && 
         registerForm.value.relationship && 
         hasRecording.value && 
         audioQuality.value >= 60
})

const filteredVoiceprints = computed(() => {
  let filtered = voiceprintList.value

  // 搜索过滤
  if (searchQuery.value) {
    filtered = filtered.filter(v => 
      v.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      v.relationship.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }

  // 排序
  filtered.sort((a, b) => {
    switch (sortBy.value) {
      case 'name':
        return a.name.localeCompare(b.name)
      case 'date':
        return new Date(b.createdAt) - new Date(a.createdAt)
      case 'quality':
        return b.quality - a.quality
      default:
        return 0
    }
  })

  return filtered
})

// 方法
const toggleRecording = () => {
  if (isRecording.value) {
    stopRecording()
  } else {
    startRecording()
  }
}

const startRecording = () => {
  isRecording.value = true
  recordingTime.value = 0
  audioData.value = []
  
  // 模拟录音过程
  const recordingInterval = setInterval(() => {
    recordingTime.value++
    
    // 模拟音频数据
    const amplitude = Math.random() * 100
    audioData.value.push(amplitude)
    
    // 绘制波形
    drawWaveform()
    
    // 计算音质
    calculateAudioQuality()
    
    if (recordingTime.value >= maxRecordingTime.value) {
      clearInterval(recordingInterval)
      stopRecording()
    }
  }, 1000)
  
  // 存储定时器引用
  registerForm.value.recordingInterval = recordingInterval
}

const stopRecording = () => {
  isRecording.value = false
  hasRecording.value = audioData.value.length > 0
  
  if (registerForm.value.recordingInterval) {
    clearInterval(registerForm.value.recordingInterval)
  }
}

const playRecording = () => {
  if (!hasRecording.value) return
  
  // 模拟播放
  alert('播放录音（模拟）')
}

const clearRecording = () => {
  audioData.value = []
  hasRecording.value = false
  recordingTime.value = 0
  audioQuality.value = 0
  
  // 清除画布
  if (waveformCanvas.value) {
    const ctx = waveformCanvas.value.getContext('2d')
    ctx.clearRect(0, 0, waveformCanvas.value.width, waveformCanvas.value.height)
  }
}

const drawWaveform = () => {
  nextTick(() => {
    if (!waveformCanvas.value || audioData.value.length === 0) return
    
    const canvas = waveformCanvas.value
    const ctx = canvas.getContext('2d')
    const width = canvas.width
    const height = canvas.height
    
    ctx.clearRect(0, 0, width, height)
    ctx.strokeStyle = '#1e3c72'
    ctx.lineWidth = 2
    
    ctx.beginPath()
    
    audioData.value.forEach((amplitude, index) => {
      const x = (index / audioData.value.length) * width
      const y = height / 2 - (amplitude / 100) * (height / 2)
      
      if (index === 0) {
        ctx.moveTo(x, y)
      } else {
        ctx.lineTo(x, y)
      }
    })
    
    ctx.stroke()
  })
}

const calculateAudioQuality = () => {
  if (audioData.value.length === 0) return
  
  // 简单的质量评分算法
  const avgAmplitude = audioData.value.reduce((sum, amp) => sum + amp, 0) / audioData.value.length
  const consistency = 100 - (audioData.value.reduce((sum, amp) => sum + Math.abs(amp - avgAmplitude), 0) / audioData.value.length)
  
  audioQuality.value = Math.max(60, Math.min(100, Math.round(consistency)))
}

const submitRegistration = () => {
  if (!canSubmit.value) return
  
  const newVoiceprint = {
    id: Date.now(),
    name: registerForm.value.name,
    relationship: registerForm.value.relationship,
    description: registerForm.value.description,
    avatar: '/api/placeholder/40/40',
    duration: recordingTime.value,
    quality: audioQuality.value,
    fileSize: audioData.value.length * 1000,
    createdAt: new Date().toISOString()
  }
  
  voiceprintList.value.unshift(newVoiceprint)
  
  // 重置表单
  registerForm.value = {
    name: '',
    relationship: '',
    description: ''
  }
  clearRecording()
  
  alert('声纹注册成功！')
}

const playVoiceprint = (voiceprint) => {
  if (isPlaying.value === voiceprint.id) {
    isPlaying.value = null
  } else {
    isPlaying.value = voiceprint.id
    // 模拟播放结束
    setTimeout(() => {
      isPlaying.value = null
    }, voiceprint.duration * 1000)
  }
}

const editVoiceprint = (voiceprint) => {
  editingId.value = voiceprint.id
  editForm.value = {
    name: voiceprint.name,
    relationship: voiceprint.relationship,
    description: voiceprint.description
  }
}

const saveEdit = () => {
  const index = voiceprintList.value.findIndex(v => v.id === editingId.value)
  if (index !== -1) {
    voiceprintList.value[index] = {
      ...voiceprintList.value[index],
      ...editForm.value
    }
  }
  cancelEdit()
}

const cancelEdit = () => {
  editingId.value = null
  editForm.value = {
    name: '',
    relationship: '',
    description: ''
  }
}

const deleteVoiceprint = (id) => {
  if (confirm('确定要删除这个声纹吗？')) {
    voiceprintList.value = voiceprintList.value.filter(v => v.id !== id)
  }
}

const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}

const formatFileSize = (bytes) => {
  if (bytes < 1024) return bytes + ' B'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
}

const getQualityClass = (quality) => {
  if (quality >= 90) return 'excellent'
  if (quality >= 80) return 'good'
  if (quality >= 70) return 'fair'
  return 'poor'
}

onMounted(() => {
  // 页面加载时的初始化
})
</script>

<style scoped>
.voiceprint-management {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .voiceprint-management {
    width: 90%;
  }
}

@media (max-width: 1200px) {
  .voiceprint-management {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .voiceprint-management {
    width: 100%;
    padding: 10px;
  }
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

.content-container {
  display: flex;
  gap: 30px;
  max-width: 1600px;
  margin: 0 auto;
}

.left-panel {
  flex: 1;
  min-width: 500px;
}

.right-panel {
  flex: 1;
  min-width: 500px;
}

.register-section {
  background: white;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.register-section h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1e3c72;
}

.recording-section {
  margin-top: 30px;
}

.recording-section h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.recording-guide {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.guide-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.guide-item i {
  color: #1e3c72;
}

.recording-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
}

.visual-area {
  margin-bottom: 20px;
}

.microphone-container {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.microphone-icon {
  font-size: 48px;
  color: #1e3c72;
  transition: color 0.3s ease;
}

.microphone-icon.active {
  color: #dc3545;
}

.wave-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  pointer-events: none;
}

.wave {
  position: absolute;
  border: 2px solid #1e3c72;
  border-radius: 50%;
  opacity: 0;
  animation: wave-pulse 2s infinite;
}

.wave:nth-child(1) {
  animation-delay: 0s;
}

.wave:nth-child(2) {
  animation-delay: 0.5s;
}

.wave:nth-child(3) {
  animation-delay: 1s;
}

@keyframes wave-pulse {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}

.waveform-canvas {
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
}

.recording-info {
  margin-bottom: 20px;
}

.time-display {
  font-size: 18px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 10px;
}

.quality-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.quality-label {
  font-size: 14px;
  color: #666;
}

.quality-bar {
  width: 120px;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.quality-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.quality-fill.excellent {
  background: #28a745;
}

.quality-fill.good {
  background: #17a2b8;
}

.quality-fill.fair {
  background: #ffc107;
}

.quality-fill.poor {
  background: #dc3545;
}

.quality-score {
  font-size: 14px;
  font-weight: 500;
  color: #1e3c72;
}

.recording-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-record {
  background: #dc3545;
  color: white;
}

.btn-record:hover:not(:disabled) {
  background: #c82333;
}

.btn-play {
  background: #28a745;
  color: white;
}

.btn-play:hover:not(:disabled) {
  background: #218838;
}

.btn-clear {
  background: #6c757d;
  color: white;
}

.btn-clear:hover:not(:disabled) {
  background: #5a6268;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #2d4a87;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #5a6268;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-submit {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  font-weight: 500;
}

.submit-section {
  margin-top: 30px;
}

.library-section {
  background: white;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  color: #1e3c72;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.search-box {
  position: relative;
}

.search-input {
  padding: 8px 35px 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 200px;
}

.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.sort-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
}

.voiceprint-list {
  space-y: 15px;
}

.voiceprint-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  transition: all 0.2s ease;
}

.voiceprint-item:hover {
  border-color: #1e3c72;
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.1);
}

.voiceprint-item.editing {
  border-color: #ffc107;
  background: #fffbf0;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info h4 {
  margin: 0 0 5px 0;
  color: #1e3c72;
}

.info p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.relationship {
  color: #17a2b8;
  font-weight: 500;
}

.item-actions {
  display: flex;
  gap: 10px;
}

.btn-icon {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: #f5f5f5;
  color: #1e3c72;
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.item-content {
  display: flex;
  gap: 20px;
}

.audio-info {
  flex: 1;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-row .label {
  color: #666;
  min-width: 80px;
}

.info-row .value {
  color: #1e3c72;
  font-weight: 500;
}

.quality-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quality-bar-small {
  width: 60px;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.quality-fill-small {
  height: 100%;
  transition: width 0.3s ease;
}

.quality-text {
  font-size: 12px;
  color: #666;
}

.description {
  flex: 1;
  padding-left: 20px;
  border-left: 1px solid #eee;
}

.description p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.edit-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.edit-form .form-group {
  margin-bottom: 15px;
}

.edit-form label {
  font-size: 14px;
  margin-bottom: 5px;
}

.edit-form input,
.edit-form select,
.edit-form textarea {
  padding: 8px;
  font-size: 14px;
}

.form-actions {
  display: flex;
  gap: 10px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 20px;
  color: #ccc;
}

.empty-state h3 {
  margin-bottom: 10px;
  color: #999;
}

@media (max-width: 1200px) {
  .content-container {
    flex-direction: column;
  }
  
  .left-panel,
  .right-panel {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .search-input {
    width: 100%;
  }
  
  .recording-guide {
    flex-direction: column;
    gap: 10px;
  }
  
  .recording-controls {
    flex-direction: column;
    gap: 10px;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .item-content {
    flex-direction: column;
  }
  
  .description {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid #eee;
    padding-top: 15px;
  }
}
</style> 